<template>
	<view>
		<my-animation :share="isShow" @display="display">
			<template v-slot:spOne>
				<!-- 1，标题标签 -->
				<view class="title">
					<view class="title-clear">
						<image :src="require('@/static/img/common/clear.svg')" @click="display"></image>
					</view>
					<view class="title-main">
						<text>选择用户</text>
					</view>
					<view class="title-btn" @click="addUserAdmin">
						<text>添加</text>
					</view>
				</view>
				<view class="title-zw"></view>
				<!-- 2，用户信息 -->
				<scroll-view scroll-y="true" :style="{height: 900 + 'rpx'}">
					<block v-for="(item,index) in usersData" :key="index">
						<my-user-item :userData="item" :isShowRadio="isShowRadio"
							@clickRadio="clickRadio"></my-user-item>
					</block>
				</scroll-view>
			</template>
		</my-animation>
	</view>
</template>

<script>
	import myAnimation from '@/components/common/my-animation/my-animation.vue'
	import myUserItem from '@/components/content/my-user-item/my-user-item.vue'

	export default {
		props: ['isShow', 'usersData'],
		components: {
			myAnimation,
			myUserItem
		},
		data() {
			return {
				isShowRadio: true
			}
		},
		methods: {
			clickRadio(item) {
				this.$emit('clickRadio', item)
			},
			display() {
				this.$emit('display')
			},
			addUserAdmin() {
				this.$emit('addUserAdmin')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title-zw {
		width: 100%;
		height: 100rpx;
	}

	.title {
		width: 100%;
		height: 100rpx;
		display: flex;
		position: fixed;
		z-index: 99;

		.title-clear {
			width: 25%;

			image {
				width: 60rpx;
				height: 60rpx;
				margin-left: 30rpx;
				margin-top: 20rpx;
			}
		}

		.title-main {
			width: 50%;
			text-align: center;
			line-height: 100rpx;
			font-size: 36rpx;
			font-weight: 600;
		}

		.title-btn {
			width: 25%;
			line-height: 100rpx;
			text-align: right;

			text {
				margin-right: 30rpx;
			}

			font-size: 34rpx;
			font-weight: 500;
			color: rgba(13, 60, 112, 1);
		}
	}
</style>